

import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx'
import { Popconfirm, Progress, notification, message, Modal, Drawer, Alert, Tabs, Table, Divider, Tag, Timeline, Tree, Statistic, Popove, List, Empty, Descriptions, Calendar, Card, Carousel, Collapse, Tooltip, Comment, Badge, Avatar, TimePicker, Transfer, TreeSelect, Select, Slider, Switch, Radio, Rate, Mentions, InputNumber, Input, Form, DatePicker, Cascader, Checkbox, AutoComplete, Button, Upload, Icon, Spin, Typography, Row, Col, Header, Footer, Sider, Content, Affix, Breadcrumb, Menu, Dropdown, Pagination, PageHeader, Steps } from 'antd'
import moment from 'moment';
import s from '../../assets/less/YunYing/BounceWord.css'
import 'moment/locale/zh-cn';
import $ from "jquery";
moment.locale('zh-cn');
const { SubMenu } = Menu;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const { Step } = Steps;
const { Title } = Typography;
const { Option } = Mentions;
const { Option1 } = Select;
const { Panel } = Collapse;
const { TabPane } = Tabs;
const { SHOW_PARENT } = TreeSelect;
@inject('YunYingStore')
@observer
export class BounceWord extends Component {

    render() {
        let newWords = undefined
        if (this.props.YunYingStore.NowWhichStep.length <= 3) {
            let words = this.props.YunYingStore.NowWhichStep[this.props.YunYingStore.NowWhichStep.length - 1].split("");
            newWords = words.map((item, index1) => {
                console.log(item);
                return (
                    <span className={s.letter}>{item}</span>
                );
            })
        } else {
            let words = this.props.YunYingStore.WordArr[3].split("");
            newWords = words.map((item, index1) => {
                console.log(item);
                return (
                    <span className={s.letter}>{item}</span>
                );
            })
        }
        return <div className={s.bounce}>{newWords}</div>
    }
}
